<template>
	<view class="sellerAfterSalesList">
		<view class="top">
			<view class="" @tap="handeTop(item)" :class="data.obj.state == item.id?'active':''"
				v-for="(item,index) in data.topArr" :key="index">
				<text>{{item.n}}</text>
			</view>
		</view>
		<scroll-view :refresher-triggered="data.refresherBool" :refresher-enabled="true"
			@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower" scroll-y="true">
			<view v-for="(item,index) in data.result.list" :key="index" class="listItem" @tap="handeClick(item)">
				<view class="top">
					订单编号:{{item.refundNo}}
					<text :style="item.refundType.value == 'ONLY_REFUND'?'color: #FF263F;':'color: #20BBC7;'">{{item.refundType.name}}</text>
				</view>
				<view class="center">
					<view class="img">
						<image v-if="item.productDTO.productPicture" :src="data.httpUrl+'/app/file/viewFile?fileId='+item.productDTO.productPicture" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="">
							<text>{{item.productDTO.productName}}</text>
							×{{item.productDTO.num}}
						</view>
						{{item.productDTO.specName}}；{{item.productDTO.specValue}}
					</view>
				</view>
				<view class="sk">
					实付款
					<text>￥{{item.productDTO.productAmount}}</text>
				</view>
				<view class="ddsjcl" v-if="data.obj.state == 'PENDING'">
					{{item.refundState.name}}
				</view>
				<view class="ddsh" v-else-if="data.obj.state == 'PROCESSING'">
					{{item.refundState.name}}  
				</view>
				<view class="thcg" v-else>
					{{item.refundState.name}}   
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
	} from 'vue';
	import { pageSellerRefundList } from '@/utils/api/goods'
	const data = reactive<any>({
		topArr: [{ n: '待处理', id: 'PENDING' }, { n: '处理中', id: 'PROCESSING' }, { n: '已处理', id: 'PROCESSED' }],
		index: 0,
		obj: { pageNo: 1, pageSize: 10, state: 'PENDING' },
		result: { list: [] },
		httpUrl: getApp().globalData.baseUrl,
	})
	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
	const handeTop = (item) => {
		if (item.id == data.obj.state) return;
		data.obj.state = item.id;
		data.obj.pageNo = 1;
		requstList()
	}
	const refresherrefresh = () => {
		data.refresherBool = true;
		data.obj.pageNo = 1;
		requstList()
	}
	const handeClick=(item)=>{
		console.log(item,'item')
		if(item.refundType.value == 'ONLY_REFUND'){
			navTo('/pages/productDetails/refund?id='+item.refundNo)
		}else{
			navTo('/pages/productDetails/returnGoods?id='+item.refundNo)
		}
	}
	const requstList = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		if (data.obj.pageNo == 1) {
			data.result.list = [];
		}
		pageSellerRefundList({ data: data.obj }).then((res) => {
			res.data.list = [...data.result.list, ...res.data.list];
			data.result = res.data;
			data.refresherBool = false;
			uni.hideLoading()
		})
	}
	const scrolltolower=()=>{
		if(data.result.total != data.result.list.length){
			data.obj.pageNo += 1;
			requstList()
		}
	}
	requstList()
</script>

<style lang="scss">
	.sellerAfterSalesList {
		height: 100vh;
		background: #F4F6FA;
		display: flex;
		flex-direction: column;

		>.top {
			white-space: nowrap;
			overflow: auto;
			width: 100%;
			background: #fff;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx 0 30rpx;

			view {
				&::after {
					content: '';
					display: block;
					width: 40rpx;
					height: 4rpx;
					border-radius: 4rpx;
					// background: ;
					margin: 10rpx auto 0 auto;
				}

				text {
					color: #595959;
				}

				display: inline-block;
				padding: 0 24rpx;

			}

			.active {
				&::after {

					background: #6B64D3;
				}

				text {
					color: #6B64D3;
				}
			}
		}
	}

	scroll-view {
		flex: 1;
		overflow: auto;
	}

	.listItem {
		width: 720rpx;
		padding: 24rpx;
		border-radius: 24rpx;
		background: #fff;
		margin: 0 auto;
		margin-top: 24rpx;

		>.bot {
			display: flex;
			justify-content: flex-end;
			margin-top: 24rpx;

			text {
				padding: 11rpx 24rpx;
				border-radius: 50rpx;
				color: #6B64D3;
				border: 2rpx solid #6B64D3;
			}
		}

		>.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #262626;
		}

		>.center {
			margin: 24rpx 0 16rpx 0;
			display: flex;
			align-items: center;

			.img {
				width: 160rpx;
				height: 160rpx;
				border-radius: 24rpx;
				background: #ccc;
				margin-right: 24rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 24rpx;
				}
			}

			.right {
				flex: 1;
				width: 0;
				color: #8C8C8C;
				font-size: 24rpx;

				>view {
					display: flex;
					margin-bottom: 10rpx;
					color: #8C8C8C;
					font-size: 24rpx;

					text {
						flex: 1;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: normal;
						margin-right: 24rpx;
					}
				}
			}
		}

		.sk {
			display: flex;
			justify-content: flex-end;
			color: #262626;
			font-size: 24rpx;
			align-items: center;

			text {
				color: #6B64D3;
				font-size: 36rpx;
			}
		}


		.pljr {
			margin-top: 24rpx;
			display: flex;
			justify-content: flex-end;

			text {
				width: 160rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 64rpx;
				background: #F4F6FA;
			}
		}

		.ddsjcl {
			padding: 10rpx 24rpx;
			border-radius: 8rpx;
			background: #F4F6FA;
			color: #FF8C00;
			margin-top: 30rpx;
		}

		.ddsh {
			padding: 10rpx 24rpx;
			border-radius: 8rpx;
			background: #F4F6FA;
			color: #FF263F;
			display: flex;
			margin-top: 30rpx;

			text {
				color: #FF263F;
				margin-left: 20rpx;
			}
		}
		.thcg{
			padding: 10rpx 24rpx;
			border-radius: 8rpx;
			background: #EDFCD2;
			color: #6AC922;
			display: flex;
			margin-top: 30rpx;
			
			text {
				color: #6AC922;
				margin-left: 20rpx;
			}
		}

	}
</style>